$(function () {

    let layer = layui.layer
    let q = {
        pagenum: 1,          //页码值
        pagesize: 10,    //每页显示多少条数据
        cate_id: '',//文章分类的id
        state: ''        //文章  的状态
    }

    initArticleList()
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(res => {
            console.log((res.data.data));
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            //渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title} </td>
                        <td>${ele.cate_name}</td>
                        <td>${formatDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <button class=" layui-btn layui-btn-xs">编辑</button>
                           <button data-id='${ele.Id}' class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>

                        </td>
                    </tr>
                `);
            })
            
            $('tbody').empty().html(arr.join(''))
            //分页
            renderPage(res.data.total)
        })
    }
    //需求2 渲染筛选中的文章类别 列表
    let form = layui.form
    initArtCateList()
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            //成功 渲染
            let arr = [' <option value="">请选择文章分类</option>']
            res.data.data.forEach(ele => {
                if (ele.Id < 0) return;
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                `)
            })
            //循环后赋值
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            form.render()
            
        })
    }

    // 筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        initArticleList()

    })


function renderPage(total){
    var laypage = layui.laypage;

    //执行一个laypage实例
    laypage.render({
        elem: 'pageBox' ,//注意，这里的 test1 是 ID，不用加 # 号
        count: total,//数据总数，从服务端得到
        limit:q.pagesize,       //每页显示多少条
        curr:q.pagenum,   //第几页
                //显示区域
            layout:['count','limit','prev','page','next','refresh','skip'],
            limit:[2,3,5,10],
      
                jump:function(obj,first){
                    //obj包含了分页所有的参数 比如   console.log(obj.curr); 得到当前页
                    //console.log(obj.limit); 得到每页显示的条数
                    //layui官网能查到页码触发事件
                if(!first){

                    q.pagenum = obj.curr;
                    q.pagesize = obj.limit;

                    initArticleList()
                }
                }
    });




}



                        // 删除 事件委托
    $('tbody').on('click', '.del-btn', function () {

        //获取自定义属性
        let id = $(this).attr('data-id')
        // alert(id)

        layer.confirm('确认删除？', { icon: 3, title: '提示' }, function (index) {
            axios({

                url: '/my/article/delete/' + id
            }).then(res => {
                console.log(res);
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                //成功提示
                layer.msg('删除文章成功')
                
                //这个功能是实现删完最后一个，可以实现跳转到上一页 。以及页面删完
                $('.del-btn').length==1 && q.pagenum >=2 && q.pagenum--
                initArticleList()


            })
            layer.close(index)
        })
    })



  
})